<script setup lang="ts">
import { ref, computed } from "vue";
import type { DefineComponent } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { components, componentList } from "@/components/mobilePage/index";
import * as _ from "lodash-es";
import { nanoid } from "nanoid";
import draggable from "vuedraggable";

defineOptions({
  name: "diy",
});

// 顶部数据
const nameTxt = ref("建设银行");
const visible = ref(false);
const loading = ref(false);
const determine = () => {
  if (nameTxt.value.trim() == "") {
    return ElMessage.error("请输入模板名称");
  }
  ElMessage.success("修改成功");
  visible.value = false;
};

const returnTap = () => {
  ElMessageBox.confirm(
    "确定离开此页面？系统可能不会保存您所做的更改。",
    "温馨提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      ElMessage.success("已返回");
    })
    .catch(() => {
      ElMessage.success("已取消");
    });
};

interface ComponentItem {
  name: string;
  component: DefineComponent;
  type: number; // 根据实际情况调整
  cname?: string;
}

// 左侧菜单
const leftMenu = ref<
  {
    title: string;
    list: ComponentItem[];
    isOpen: boolean;
    type: number;
  }[]
>([]); // 存储分类结果

const categorizeComponents = () => {
  const categories = [
    {
      title: "基础组件",
      list: [] as ComponentItem[],
      isOpen: true,
      type: 0,
    },
    {
      title: "营销组件",
      list: [] as ComponentItem[],
      isOpen: true,
      type: 1,
    },
    {
      title: "工具组件",
      list: [] as ComponentItem[],
      isOpen: true,
      type: 2,
    },
  ];
  componentList.forEach((component) => {
    const category = categories.find((cat) => cat.type === component.type);
    if (category) {
      category.list.push(component);
    }
  });
  leftMenu.value = categories;
};

const addDom = (element: HTMLElement, type: Number) => {
  // 使用 element 代替原 this 上下文
  const component = componentList.find((item) => item.type === type);
  if (component) {
    console.log(element);
  }
};
const cloneDog = (item: any) => {
  return { ...item, id: nanoid() }; // 使用新ID防止冲突
};

// 中间
const mConfig = ref([]); // 中间渲染的组件
const activeIndex = ref(0);
const colorTxt = ref(false);
const colorPickerTxt = ref("#ffffff");
const log = (evt: Event) => {
  /* 处理拖拽事件 */
};
const onMove = (evt: Event) => {
  /* 处理移动事件 */
};
const bindHide = (item: Event) => {
  /* ... */
};
const movePage = (item: any, currentIndex: any, direction: any) => {};

// 初始化时自动分类
categorizeComponents();
</script>

<template>
  <div class="grid h-full w-full grid-rows-[auto_1fr] rounded-xl bg-white">
    <div
      class="flex h-[50px] items-center border-b p-3 bg-blue-600 text-white text-sm"
    >
      <div class="flex items-center text-sm cursor-pointer" @click="returnTap">
        <div class="iconfont icon-left"></div>
        <div class="ml-2">返回</div>
      </div>

      <div class="h-4 mx-4 border-r border-white"></div>

      <div class="flex items-center">
        <span class="name mr5">当前页面：{{ nameTxt || "模板" }}</span>

        <el-popover :visible="visible" placement="bottom" :width="347">
          <template #reference>
            <span
              class="iconfont icon-edit ml-2 cursor-pointer"
              @click="visible = !visible"
            ></span>
          </template>
          <div class="flex">
            <el-input
              v-model="nameTxt"
              placeholder="必填不超过15个字"
              maxlength="15"
              style="width: 200px"
            ></el-input>
            <el-button type="default" @click="visible = !visible">
              取消
            </el-button>
            <el-button type="primary" @click="determine">确定</el-button>
          </div>
        </el-popover>
      </div>

      <div class="ml-auto">
        <el-button type="primary" :loading="loading"> 预览 </el-button>
        <el-button type="primary" :loading="loading"> 保存 </el-button>
        <el-button type="default" :loading="loading"> 保存并关闭 </el-button>
      </div>
    </div>

    <div class="h-full w-full overflow-y-auto">
      <div class="grid h-full w-full grid-cols-[auto_1fr_auto]">
        <div class="overflow-container w-[300px] border-r">
          <div class="p-2">
            <div
              class="cursor-pointer rounded border p-3 mb-2 hover:shadow-md"
              v-for="(item, index) in leftMenu"
              :key="index"
            >
              <div
                class="flex items-center justify-center"
                @click="item.isOpen = !item.isOpen"
              >
                <div class="mr-1">{{ item.title }}</div>
                <div class="iconfont icon-right" v-if="!item.isOpen"></div>
                <div class="iconfont icon-right" v-else></div>
              </div>
              <draggable
                class="dragArea list-group"
                v-model="item.list"
                :group="{ name: 'people', pull: 'clone', put: false }"
                :clone="cloneDog"
                item-key="id"
                :dragClass="'dragClass'"
                :filter="'.search, .navbar, .homeComb, .service'"
              >
                <template #item="{ element, index }">
                  <div
                    class="list-group-item"
                    @click="addDom(element, 1)"
                    v-show="item.isOpen"
                  >
                    <div>
                      <div class="position" style="display: none">
                        释放鼠标将组件添加到此处
                      </div>
                      <div class="iconfont icon-lunbotu text-2xl"></div>
                      <p class="conter">{{ element.cname }}</p>
                    </div>
                  </div>
                </template>
              </draggable>
            </div>
          </div>
        </div>
        <div class="overflow-container bg-gray-100">
          <el-container class="h-full w-full">
            <el-main>
              <div class="wrapper-con">
                <div class="content">
                  <div class="contxt">
                    <div class="overflowy">
                      <div class="picture">
                        <img src="@/assets/images/electric.png" />
                      </div>
                      <div class="page-title">
                        首页
                        <div class="delete-box"></div>
                        <div class="handle"></div>
                      </div>
                    </div>
                    <div class="scrollCon">
                      <div style="width: 460px; margin: 0 auto">
                        <div class="scroll-box" ref="imgContainer">
                          <draggable
                            class="dragArea list-group"
                            v-model="mConfig"
                            group="people"
                            @change="log"
                            :filter="'.top'"
                            :move="onMove"
                            :animation="300"
                            item-key="id"
                          >
                            >
                            <template #item="{ element, index }">
                              <div
                                class="mConfig-item"
                                :class="{
                                  on: activeIndex === index,
                                  top:
                                    element.name === 'search_box' ||
                                    element.name === 'nav_bar',
                                }"
                                :style="
                                  colorTxt
                                    ? { backgroundColor: colorPickerTxt }
                                    : { backgroundColor: '#fff' }
                                "
                              >
                                <component
                                  :is="element.name"
                                  ref="getComponentData"
                                  :index="index"
                                  :num="element.num"
                                ></component>
                                <div class="delete-box">
                                  <div class="handleType">
                                    <div
                                      class="iconfont"
                                      @click.stop="bindHide(element)"
                                    ></div>
                                    <div class="iconfont iconshanchu3"></div>
                                    <div class="iconfont icona-fuzhi1"></div>
                                    <div
                                      class="iconfont iconshang"
                                      :class="index === 0 ? 'on' : ''"
                                      @click.stop="movePage(element, index, 1)"
                                    ></div>
                                    <div
                                      class="iconfont iconxia"
                                      :class="
                                        index === mConfig.length - 1 ? 'on' : ''
                                      "
                                      @click.stop="movePage(element, index, 0)"
                                    ></div>
                                  </div>
                                </div>
                                <div class="handle"></div>
                                <div
                                  class="delete-name"
                                  :class="{ on: activeIndex === index }"
                                >
                                  {{ element.cname }}
                                </div>
                              </div>
                            </template>
                          </draggable>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-main>
          </el-container>
        </div>
        <div class="overflow-container w-[220px] border-l">
          <div v-for="i in 100" :key="i">{{ i }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dragArea.list-group {
  display: flex;
  flex-wrap: wrap;

  .list-group-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 66px;
    margin-right: 17px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;

    &:hover {
      box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
      border-right: 5px;
      transform: scale(1.1);
      transition: all 0.2s;
    }

    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}

.wrapper-con {
  position: relative;
  flex: 1;
  background: #f0f2f5;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  height: 100%;
  .acticons {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
    z-index: 1;
    .el-button + .el-button {
      margin-left: 0;
    }
  }
}

.content {
  position: relative;
  height: 100%;
  width: 100%;

  .page-foot {
    position: relative;
    width: 379px;
    margin: 0 auto 20px auto;

    .delete-box {
      display: none;
      position: absolute;
      left: -2px;
      top: 0;
      width: 383px;
      height: 100%;
      border: 2px dashed var(--prev-color-primary);
      padding: 10px 0;
    }

    &:hover,
    &.on {
      /* cursor: move; */
      .delete-box {
        /* display: block; */
      }
    }

    &.on {
      cursor: move;

      .delete-box {
        display: block;
        border: 2px solid var(--prev-color-primary);
        box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
      }
    }
  }

  .page-title {
    position: relative;
    height: 35px;
    line-height: 35px;
    background: #fff;
    font-size: 15px;
    color: #333333;
    text-align: center;
    width: 379px;
    margin: 0 auto;

    .delete-box {
      display: none;
      position: absolute;
      left: -2px;
      top: 0;
      width: 383px;
      height: 100%;
      border: 2px dashed var(--prev-color-primary);
      padding: 10px 0;

      span {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 32px;
        height: 16px;
        line-height: 16px;
        display: inline-block;
        text-align: center;
        font-size: 10px;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
        margin-left: 2px;
        cursor: pointer;
        z-index: 11;
      }
    }

    &:hover,
    &.on {
      /* cursor: move; */
      .delete-box {
        /* display: block; */
      }
    }

    &.on {
      cursor: move;

      .delete-box {
        display: block;
        border: 2px solid var(--prev-color-primary);
        box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
      }
    }
  }

  .scroll-box {
    flex: 1;
    background-color: #fff;
    width: 379px;
    margin: 0 auto;
    padding-top: 1px;
  }

  .dragArea.list-group {
    width: 100%;
    height: 100%;

    .mConfig-item {
      position: relative;
      cursor: move;
      &.hide {
        &::before {
          position: absolute;
          content: "已隐藏";
          background: rgba(0, 0, 0, 0.5);
          width: 100%;
          height: 100%;
          z-index: 99;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .delete-name.on {
        background: var(--prev-color-primary-light-3);
        color: #fff;
        &::before {
          background: var(--prev-color-primary-light-3);
        }
      }
      .delete-name {
        position: absolute;
        top: 0;
        background: #fff;
        left: -100px;
        width: 86px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        font-size: 13px;
        color: #666;
        border-radius: 3px;

        &::before {
          content: "";
          position: absolute;
          width: 10px;
          height: 10px;
          background: #fff;
          transform: rotate(45deg);
          top: 50%;
          right: -5px;
          margin-top: -5px;
        }
      }
      .delete-box {
        display: none;
        position: absolute;
        left: -2px;
        top: 0;
        width: 383px;
        height: 100%;
        border: 2px dashed var(--prev-color-primary);

        /* padding: 10px 0; */
        .handleType {
          position: absolute;
          right: -43px;
          top: 0;
          width: 36px;
          border-radius: 4px;
          background-color: var(--prev-color-primary);
          cursor: pointer;
          color: #fff;
          font-weight: bold;
          text-align: center;
          padding: 4px 0;
          .el-tooltip {
            background-color: inherit;
            color: inherit;
          }
          .iconfont {
            padding: 5px 0;

            &.on {
              opacity: 0.4;
            }
          }
        }
      }

      &.on {
        cursor: move;

        .delete-box {
          display: block;
          border: 2px solid var(--prev-color-primary);
          box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
        }
      }
    }

    .mConfig-item:hover {
      transform: scale(1.01);
      box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
      transition: all 0.2s;
    }
  }
}

.overflowy {
  margin-right: 4px;
  .picture {
    width: 379px;
    height: 20px;
    margin: 0 auto;
    background-color: #fff;
  }
}
</style>
